*{
    padding: 0;
    margin: 0;
}
html{
    font-size: 63.5%;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
img{
    background-color: #666;
    height: 60rem;
    width: 10rem;
    margin: 1rem;
    border-radius: 20rem;

    object-fit: cover;

    --expand-width: 60rem;
    --shrink-width: 10rem;
    --expand-radius: 3.6rem;
    --shrink-radius: 20rem;
}
a:nth-child(1) img{
    animation: swiper 30s infinite;
}
a:nth-child(2) img{
    animation: swiper 30s 6s infinite;
}
a:nth-child(3) img{
    animation: swiper 30s 12s infinite;
}
a:nth-child(4) img{
    animation: swiper 30s 18s infinite;
}
@keyframes swiper {
    0%{
        width: var(--shrink-width);
        border-radius: var(--shrink-radius);
    }
    1%{
        width: var(--expand-width);
        border-radius: var(--expand-radius);
    }
    20%{
        width: var(--expand-width);
        border-radius: var(--expand-radius);
    }
    21%{
        width: var(--shrink-width);
        border-radius: var(--shrink-radius);
    }
    100%{
        width: var(--shrink-width);
        border-radius: var(--shrink-radius);
    }
}